﻿; window.ZbTemplet = window.ZbTemplet || {};
window.ZbTemplet.InterfacePparam = `
<div class="param">
    <div class="param-item">
        <div class="param-name">
            参数名
        </div>
        <div class="param-type">
            参数类型
        </div>
        <div class="param-isnotnull">
            是否必填
        </div>
        <div class="param-desc">
            参数描述
        </div>
        <div class="param-delete">
            
        </div>
    </div>
    <draggable chosen-class="chosen" force-fallback="true" group="people" animation="500">
        <transition-group>
            <div class="param-item" v-for="(header, index) in options.params" :key="header.param_orderby">
                <div class="param-name">
                    <el-input v-model="header.param_name"
                              size="mini"></el-input>
                </div>
                <div class="param-type">
                    <el-select v-model="header.param_type" 
                               placeholder="请选择"
                               size="mini">
                        <el-option label="string" value="1"></el-option>
                        <el-option label="number" value="2"></el-option>
                        <el-option label="datetime" value="3"></el-option>
                    </el-select>
                </div>
                <div class="param-isnotnull">
                    <el-select v-model="header.is_not_null" 
                               placeholder="请选择"
                               size="mini">
                        <el-option label="是" value="Y"></el-option>
                        <el-option label="否" value="N"></el-option>
                    </el-select>
                </div>
                <div class="param-desc">
                    <el-input v-model="header.param_desc"
                              size="mini"></el-input>
                </div>
                <div class="param-delete">
                    <el-button type="default" 
                           @click="deleteParams(index)"
                           circle
                           icon="el-icon-delete"
                           size="mini"></el-button>
                </div>
            </div>
        </transition-group>
    </draggable>
    <div>
        <el-button type="primary" 
                   @click="addParams"
                   size="mini"
                   plain>新增</el-button>
    </div>
</div>
`;

if (!Array.prototype.find) {
    Array.prototype.find = function (callback) {
        return callback && (this.filter(callback) || [])[0];
    };
}

Vue.component('zb-interface-param', {
    template: window.ZbTemplet.InterfacePparam
    , data() {
        return {
            formInfo: {
                name: ''
            }
        }
    }
    , props: ['options']
    , methods: {
        addParams: function () {
            let allIndex = this.options.params.map(p => p.param_orderby)
            let idx = Math.max(...allIndex, 0);
            console.log(this.options.params);
            this.options.params.push({
                param_name: ''
                , param_type: '1'
                , is_not_null: 'Y'
                , param_desc: ''
                , param_orderby: idx + 1
            });
        }
        , deleteParams: function (index) {
            this.options.params.splice(index, 1);
        }
    }
});